import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTheme } from './theme/ThemeContext';
import { ThemedTextProps } from './types';

export function ThemedText({
  variant = 'body',
  style,
  children,
}: ThemedTextProps) {
  const { theme } = useTheme();

  const getTextStyle = () => ({
    ...styles.base,
    ...styles[variant],
    color: theme.colors.text,
    ...style,
  });

  return (
    <Text style={getTextStyle()}>
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  base: {
    fontSize: 16,
  },
  h1: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  h2: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  h3: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  body: {
    fontSize: 16,
  },
  caption: {
    fontSize: 14,
    opacity: 0.7,
  },
});
